<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Template • TodoMVC</title>
    <link rel="stylesheet" href="node_modules/todomvc-common/base.css">
    <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
    <!-- CSS overrides - remove if you don't need it -->
    <link rel="stylesheet" href="css/app.css">
    <script src="js/vue-2.4.0.js"></script>
    <style>
        /* .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateX(70px)
        }
        
        .v-enter-active,
        .v-leave-active {
            transition: all 1s ease;
            position: absolute;
        }
        
        .v-move {
            transition: all 1s ease
        } */
        
        .show {
            display: block
        }
    </style>
</head>

<body>
    <div id="app">
        <section class="todoapp">
            <header class="header">
                <h1>todos</h1>
                <input class="new-todo" placeholder="What needs to be done?" autofocus v-model="importInput" @keyup.enter="keyupWord">
            </header>
            <!-- This section should be hidden by default and shown when there are todos -->
            <section class="main">
                <input id="toggle-all" class="toggle-all" type="checkbox">
                <label for="toggle-all">Mark all as complete</label>
                <ul class="todo-list">
                    <!-- These are here just to show the structure of the list items -->
                    <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->



                    <!-- <li class="completed">
                        <div class="view">
                            <input class="toggle" type="checkbox" checked>
                            <label>Taste JavaScript</label>
                            <button class="destroy"></button>
                        </div>
                        <input class="edit" value="Create a TodoMVC template">
					</li> -->
                    <!-- <transition-group> -->
                    <li v-for="(item,index) in list" :class="[item.status?'completed':'',addClass?'editing':''] " :key="item.id">
                        <div class="view">
                            <input class="toggle" type="checkbox" :checked="item.status" @click="trigger(index)">
                            <label v-text="item.val" @dblclick="addClass=!addClass"></label>
                            <button class="destroy" @click="del(item.id)"></button>
                        </div>
                        <input class="edit" :value="item.val">
                    </li>
                    <!-- </transition-group> -->



                </ul>
            </section>
            <!-- This footer should hidden by default and shown when there are todos -->
            <footer class="footer ">
                <!-- This should be `0 items left` by default -->
                <span class="todo-count "><strong v-text="fillnum"></strong> item left</span>
                <!-- Remove this if you don't implement routing -->
                <ul class="filters ">
                    <li>
                        <a class="selected " href="#/ ">All</a>
                    </li>
                    <li>
                        <a href="#/active ">Active</a>
                    </li>
                    <li>
                        <a href="#/completed ">Completed</a>
                    </li>
                </ul>
                <!-- Hidden if no completed items are left ↓ -->
                <button class="clear-completed ">Clear completed</button>
            </footer>
        </section>
        <footer class="info ">
            <p>Double-click to edit a todo</p>
            <!-- Remove the below line ↓ -->
            <p>Template by <a href="http://sindresorhus.com ">Sindre Sorhus</a></p>
            <!-- Change this out with your name and url ↓ -->
            <p>Created by <a href="http://todomvc.com ">you</a></p>
            <p>Part of <a href="http://todomvc.com ">TodoMVC</a></p>
        </footer>
    </div>
    <script src="node_modules/todomvc-common/base.js "></script>
    <script src="js/app.js "></script>
    <script>
        new Vue({

            el: "#app ",
            data: {
                addClass: false,
                count: 0,
                importInput: " ",
                chechednum: 0,
                fillnum: 0,
                list: [{
                    newClass: "",
                    status: false,
                    id: this.count,
                    val: "卖土豆 ",
                }]
            },
            methods: {
                keyupWord() {
                    this.list.push({
                        val: this.importInput,
                        newClass: "",
                        status: false,
                        id: this.count
                    })
                    this.importInput = ""


                },
                trigger(id) {
                    this.count++
                        this.list[id].status = !this.list[id].status
                    for (var i = 0; i < this.list.length; i++) {
                        if (this.list[i].status == true) {
                            this.chechednum = this.chechednum - 1
                        } else {
                            this.chechednum = this.chechednum + 1
                        }
                    }
                    this.fillnum = this.chechednum
                },
                del(id) {
                    var index = this.list.findIndex(item => {
                        if (item.id == id) {
                            return true;
                        }
                    })

                    this.list.splice(index, 1)
                },


                fun() {
                    var con = this.list.filter(item => {
                        return item.status == false
                    })
                    this.fillnum = con.length
                }
            },
            mounted() {
                this.fun()
            },
            beforeUpdate() {
                this.fun()

            }
        })
    </script>
</body>

</html>